<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>爱来自DKY - 图片资源共享平台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            accent: '#F59E0B',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
      }
      .upload-area-active {
        @apply border-primary bg-blue-50;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .hero-image {
        background-size: cover;
        background-position: center;
      }
      .btn-active {
        @apply bg-primary text-white;
      }
      .action-btn {
        @apply bg-white text-dark p-3 rounded-full hover:bg-gray-100 transition-colors w-10 h-10 flex items-center justify-center;
      }
    }
  </style>
</head>
<body class="bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <h1 class="text-xl md:text-2xl font-bold text-red-600">爱来自DKY</h1>
      </div>
      
      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="font-medium hover:text-primary transition-colors home-link">首页</a>
        <a href="#" class="font-medium hover:text-primary transition-colors gallery-link">热门图片</a>
        <a href="#" class="font-medium hover:text-primary transition-colors profile-link">我的</a>
      </div>
      
      <button id="uploadBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-all duration-300 hover:shadow-md">
        <i class="fa fa-cloud-upload"></i>
        <span>上传图片</span>
      </button>
      
      <button class="md:hidden text-dark text-xl" id="mobileMenuBtn">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
        <a href="#" class="py-2 font-medium hover:text-primary transition-colors home-link">首页</a>
        <a href="#" class="py-2 font-medium hover:text-primary transition-colors gallery-link">热门图片</a>
        <a href="#" class="py-2 font-medium hover:text-primary transition-colors profile-link">我的</a>
      </div>
    </div>
  </header>

  <!-- 主要内容区 -->
  <main class="container mx-auto px-4 py-0">
    <!-- 首页区域 -->
    <section id="homeSection" class="w-full">
      <div id="heroImage" class="hero-image h-[80vh] flex items-center">
        <div class="bg-black/50 text-white p-8 md:p-12 rounded-lg max-w-2xl mx-auto">
          <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold mb-4">分享和发现精彩图片</h2>
          <p class="text-lg mb-6">这里是图片爱好者的天堂，您可以上传和分享各类图片资源，也能发现并下载心仪的图片。</p>
          <div class="flex flex-col sm:flex-row gap-4">
            <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 transition-all duration-300 hover:shadow-md gallery-link">
              <i class="fa fa-th"></i>
              <span>浏览图片库</span>
            </button>
            <button id="homeUploadBtn" class="bg-white hover:bg-gray-100 text-dark px-6 py-3 rounded-lg flex items-center justify-center space-x-2 transition-all duration-300 hover:shadow-md">
              <i class="fa fa-upload"></i>
              <span>上传图片</span>
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 图片库区域 -->
    <section id="gallerySection" class="py-8 hidden">
      <!-- 上传区域 -->
      <section id="uploadSection" class="mb-16 bg-white rounded-xl shadow-sm p-6 md:p-8">
        <h3 class="text-xl font-bold mb-6 flex items-center">
          <i class="fa fa-upload text-primary mr-2"></i>
          上传图片
        </h3>
        
        <!-- 已选择待上传的图片 -->
        <div id="pendingUploads" class="mb-6 hidden">
          <h4 class="font-medium mb-3">待上传图片:</h4>
          <div id="pendingImagesContainer" class="flex flex-wrap gap-4">
            <!-- 待上传图片会在这里显示 -->
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <div id="dropArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-300">
              <i class="fa fa-cloud-upload text-5xl text-gray-400 mb-4"></i>
              <p class="mb-4 text-gray-600">拖放图片到这里，或者</p>
              <label class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg inline-block cursor-pointer transition-all duration-300 hover:shadow-md">
                <i class="fa fa-file-image-o mr-2"></i>选择图片
                <input type="file" id="fileInput" accept="image/*" class="hidden" multiple>
              </label>
              <p class="mt-4 text-sm text-gray-500">支持 JPG, PNG, GIF 格式，单张图片不超过 10MB</p>
            </div>
            
            <!-- 上传进度 -->
            <div id="uploadProgress" class="mt-6 hidden">
              <div class="flex justify-between mb-2">
                <span id="progressFileName" class="font-medium"></span>
                <span id="progressPercent" class="font-medium">0%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div id="progressBar" class="bg-primary h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
              </div>
            </div>
            
            <!-- 上传成功提示 -->
            <div id="uploadSuccess" class="mt-6 hidden p-4 bg-green-50 border border-green-200 rounded-lg">
              <div class="flex items-start">
                <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                <div>
                  <h4 class="font-medium text-green-800">上传成功！</h4>
                  <p class="text-sm text-green-700 mt-1">您的图片已成功上传并可以分享了。</p>
                  <p class="text-sm text-green-700 mt-1">图片编号: <span id="uploadedImageId"></span></p>
                </div>
              </div>
            </div>
          </div>
          
          <div>
            <form id="imageForm" class="space-y-4">
              <div>
                <label for="imageTitle" class="block text-sm font-medium text-gray-700 mb-1">图片标题 *</label>
                <input type="text" id="imageTitle" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">图片形状类型 *</label>
                <div class="space-y-2">
                  <div class="flex items-center">
                    <input type="radio" id="shapeHorizontal" name="imageShape" value="横版" required
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="shapeHorizontal" class="ml-2 text-gray-700">横版</label>
                  </div>
                  <div class="flex items-center">
                    <input type="radio" id="shapeVertical" name="imageShape" value="竖版"
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="shapeVertical" class="ml-2 text-gray-700">竖版</label>
                  </div>
                  <div class="flex items-center">
                    <input type="radio" id="shapeOther" name="imageShape" value="其他"
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="shapeOther" class="ml-2 text-gray-700">其他</label>
                    <input type="text" id="shapeOtherText" placeholder="请输入" disabled
                      class="ml-2 px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-32">
                  </div>
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">图片类型 *</label>
                <div class="space-y-2">
                  <div class="flex items-center">
                    <input type="radio" id="typeBadge" name="imageType" value="吧唧徽章" required
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="typeBadge" class="ml-2 text-gray-700">吧唧徽章</label>
                  </div>
                  <div class="flex items-center">
                    <input type="radio" id="typePoster" name="imageType" value="海报"
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="typePoster" class="ml-2 text-gray-700">海报</label>
                  </div>
                  <div class="flex items-center">
                    <input type="radio" id="typeCard" name="imageType" value="明信片"
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="typeCard" class="ml-2 text-gray-700">明信片</label>
                  </div>
                  <div class="flex items-center">
                    <input type="radio" id="typeOther" name="imageType" value="其他"
                      class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                    <label for="typeOther" class="ml-2 text-gray-700">其他</label>
                    <input type="text" id="typeOtherText" placeholder="请输入" disabled
                      class="ml-2 px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-32">
                  </div>
                </div>
              </div>
              
              <button type="submit" id="submitUpload" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg flex items-center justify-center space-x-2 transition-all duration-300 hover:shadow-md mt-4">
                <i class="fa fa-cloud-upload"></i>
                <span>确认上传</span>
              </button>
            </form>
          </div>
        </div>
      </section>
      
      <!-- 图片过滤和搜索 -->
      <section class="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <h3 class="text-xl font-bold">图片资源库</h3>
        
        <div class="w-full md:w-auto flex flex-col sm:flex-row gap-4">
          <div class="relative">
            <input type="text" id="searchInput" placeholder="搜索图片、标签或编号..." 
              class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-full sm:w-64">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
          
          <div class="flex gap-2">
            <button class="sort-btn border border-gray-300 px-4 py-2 rounded-lg focus:outline-none hover:bg-gray-100 transition-colors" data-sort="default">
              默认排序
            </button>
            <button class="sort-btn border border-gray-300 px-4 py-2 rounded-lg focus:outline-none hover:bg-gray-100 transition-colors" data-sort="downloads">
              <i class="fa fa-download mr-1"></i>下载量
            </button>
            <button class="sort-btn border border-gray-300 px-4 py-2 rounded-lg focus:outline-none hover:bg-gray-100 transition-colors" data-sort="likes">
              <i class="fa fa-heart mr-1 text-red-500"></i>点赞量
            </button>
            <button class="sort-btn border border-gray-300 px-4 py-2 rounded-lg focus:outline-none hover:bg-gray-100 transition-colors" data-sort="recent">
              <i class="fa fa-clock-o mr-1"></i>最新
            </button>
          </div>
        </div>
      </section>
      
      <!-- 标签筛选 -->
      <section class="mb-8 flex flex-wrap gap-2">
        <span class="text-gray-600">热门标签:</span>
        <div id="tagContainer">
          <!-- 标签将通过JavaScript动态生成 -->
        </div>
      </section>
      
      <!-- 图片网格 -->
      <section id="imageGrid" class="image-grid mb-16">
        <!-- 图片卡片将通过JavaScript动态生成 -->
      </section>
      
      <!-- 加载更多 -->
      <div class="text-center mb-16">
        <button id="loadMoreBtn" class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-2 rounded-lg transition-all duration-300">
          加载更多
          <i class="fa fa-refresh ml-2"></i>
        </button>
      </div>
    </section>
    
    <!-- "我的"页面区域 -->
    <section id="profileSection" class="py-8 hidden">
      <!-- 身份选择 -->
      <div id="identitySelection" class="max-w-2xl mx-auto bg-white rounded-xl shadow-sm p-6 md:p-8 mb-8">
        <h3 class="text-xl font-bold mb-6 text-center">选择您的身份</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <button id="userIdentityBtn" class="bg-white border-2 border-primary text-primary hover:bg-primary hover:text-white p-6 rounded-lg flex flex-col items-center justify-center transition-all duration-300">
            <i class="fa fa-user text-4xl mb-4"></i>
            <span class="text-lg font-medium">普通用户</span>
          </button>
          <button id="adminIdentityBtn" class="bg-white border-2 border-gray-300 text-gray-700 hover:bg-gray-50 p-6 rounded-lg flex flex-col items-center justify-center transition-all duration-300">
            <i class="fa fa-shield text-4xl mb-4"></i>
            <span class="text-lg font-medium">管理员</span>
          </button>
        </div>
      </div>
      
      <!-- 用户页面 -->
      <div id="userPage" class="max-w-2xl mx-auto hidden">
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 mb-8">
          <h3 class="text-xl font-bold mb-6 flex items-center">
            <i class="fa fa-comment text-primary mr-2"></i>
            提交诉求
          </h3>
          <form id="feedbackForm" class="space-y-4">
            <div>
              <label for="feedbackTitle" class="block text-sm font-medium text-gray-700 mb-1">诉求标题 *</label>
              <input type="text" id="feedbackTitle" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div>
              <label for="feedbackContent" class="block text-sm font-medium text-gray-700 mb-1">诉求内容 *</label>
              <textarea id="feedbackContent" rows="5" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
            </div>
            <div>
              <label for="feedbackContact" class="block text-sm font-medium text-gray-700 mb-1">联系方式（选填）</label>
              <input type="text" id="feedbackContact" placeholder="电话或邮箱"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <button type="submit" class="bg-primary hover:bg-primary/90 text-white py-3 rounded-lg flex items-center justify-center space-x-2 transition-all duration-300 hover:shadow-md mt-4">
              <i class="fa fa-paper-plane"></i>
              <span>提交诉求</span>
            </button>
          </form>
        </div>
      </div>
      
      <!-- 管理员登录页面 -->
      <div id="adminLoginPage" class="max-w-md mx-auto hidden">
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 mb-8">
          <h3 class="text-xl font-bold mb-6 text-center">管理员登录</h3>
          <form id="adminLoginForm" class="space-y-4">
            <div>
              <label for="adminUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名 *</label>
              <input type="text" id="adminUsername" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div>
              <label for="adminPassword" class="block text-sm font-medium text-gray-700 mb-1">密码 *</label>
              <input type="password" id="adminPassword" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div class="text-right">
              <button type="button" id="forgotPasswordBtn" class="text-primary hover:text-primary/80 text-sm transition-colors">
                忘记密码?
              </button>
            </div>
            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg flex items-center justify-center space-x-2 transition-all duration-300 hover:shadow-md mt-4">
              <i class="fa fa-sign-in"></i>
              <span>登录</span>
            </button>
          </form>
        </div>
      </div>
      
      <!-- 忘记密码页面 -->
      <div id="forgotPasswordPage" class="max-w-md mx-auto hidden">
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 mb-8">
          <h3 class="text-xl font-bold mb-6 text-center">重置密码</h3>
          <form id="forgotPasswordForm" class="space-y-4">
            <div>
              <label for="resetPhone" class="block text-sm font-medium text-gray-700 mb-1">手机号 *</label>
              <input type="tel" id="resetPhone" required placeholder="请输入您的手机号"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div>
              <label for="resetSmsCode" class="block text-sm font-medium text-gray-700 mb-1">验证码 *</label>
              <div class="flex gap-2">
                <input type="text" id="resetSmsCode" required placeholder="请输入验证码"
                  class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                <button type="button" id="sendResetSmsBtn" class="bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-300 whitespace-nowrap">
                  获取验证码
                </button>
              </div>
              <p class="text-xs text-gray-500 mt-1">提示：验证码默认为 201502</p>
            </div>
            <div>
              <label for="newAdminPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码 *</label>
              <input type="password" id="newAdminPassword" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div>
              <label for="confirmNewPassword" class="block text-sm font-medium text-gray-700 mb-1">确认新密码 *</label>
              <input type="password" id="confirmNewPassword" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div class="flex gap-2">
              <button type="button" id="backToLoginBtn" class="flex-1 border border-gray-300 py-3 rounded-lg transition-all duration-300">
                返回登录
              </button>
              <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-3 rounded-lg transition-all duration-300">
                重置密码
              </button>
            </div>
          </form>
        </div>
      </div>
      
      <!-- 管理员页面 -->
      <div id="adminPage" class="max-w-4xl mx-auto hidden">
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 mb-8">
          <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-shield text-primary mr-2"></i>
              管理员控制台
            </h3>
            <button id="logoutBtn" class="mt-4 md:mt-0 text-red-500 hover:text-red-700 flex items-center transition-colors">
              <i class="fa fa-sign-out mr-1"></i>
              <span>退出登录</span>
            </button>
          </div>
          
          <!-- 管理员标签页 -->
          <div class="border-b border-gray-200 mb-6">
            <nav class="-mb-px flex" aria-label="Tabs">
              <button class="admin-tab-btn btn-active py-4 px-4 border-b-2 border-transparent rounded-t-lg" data-tab="user-feedback">
                用户诉求
              </button>
              <button class="admin-tab-btn py-4 px-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="manage-images">
                管理图片
              </button>
              <button class="admin-tab-btn py-4 px-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="manage-admin">
                管理员设置
              </button>
              <button class="admin-tab-btn py-4 px-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="site-settings">
                网站设置
              </button>
            </nav>
          </div>
          
          <!-- 用户诉求管理 -->
          <div id="user-feedback-tab" class="admin-tab-content">
            <h4 class="font-semibold text-lg mb-4">用户诉求列表</h4>
            <div id="feedbackList" class="space-y-4">
              <!-- 用户诉求将通过JavaScript动态生成 -->
            </div>
          </div>
          
          <!-- 图片管理 -->
          <div id="manage-images-tab" class="admin-tab-content hidden">
            <h4 class="font-semibold text-lg mb-4">图片管理</h4>
            <div id="adminImageGrid" class="image-grid">
              <!-- 管理员图片列表将通过JavaScript动态生成 -->
            </div>
          </div>
          
          <!-- 管理员设置 -->
          <div id="manage-admin-tab" class="admin-tab-content hidden">
            <h4 class="font-semibold text-lg mb-4">管理员设置</h4>
            
            <div class="mb-8">
              <h5 class="font-medium text-gray-700 mb-3">修改密码</h5>
              <form id="changePasswordForm" class="space-y-4">
                <div>
                  <label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-1">当前密码 *</label>
                  <input type="password" id="currentPassword" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div>
                  <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码 *</label>
                  <input type="password" id="newPassword" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div>
                  <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认新密码 *</label>
                  <input type="password" id="confirmPassword" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <button type="submit" class="bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-300">
                  确认修改
                </button>
              </form>
            </div>
            
            <div>
              <h5 class="font-medium text-gray-700 mb-3">添加新管理员</h5>
              <form id="addAdminForm" class="space-y-4">
                <div>
                  <label for="newAdminUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名 *</label>
                  <input type="text" id="newAdminUsername" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div>
                  <label for="newAdminPassword" class="block text-sm font-medium text-gray-700 mb-1">密码 *</label>
                  <input type="password" id="newAdminPassword" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div>
                  <label for="adminPhone" class="block text-sm font-medium text-gray-700 mb-1">手机号 *</label>
                  <div class="flex gap-2">
                    <input type="tel" id="adminPhone" required placeholder="用于接收验证码"
                      class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <button type="button" id="sendAdminSmsBtn" class="bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-300 whitespace-nowrap">
                      获取验证码
                    </button>
                  </div>
                  <p class="text-xs text-gray-500 mt-1">提示：验证码默认为 201502</p>
                </div>
                <div>
                  <label for="adminSmsCode" class="block text-sm font-medium text-gray-700 mb-1">验证码 *</label>
                  <input type="text" id="adminSmsCode" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <button type="submit" class="bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-300">
                  添加管理员
                </button>
              </form>
            </div>
          </div>
          
          <!-- 网站设置 -->
          <div id="site-settings-tab" class="admin-tab-content hidden">
            <h4 class="font-semibold text-lg mb-4">网站设置</h4>
            
            <div class="mb-8">
              <h5 class="font-medium text-gray-700 mb-3">修改首页图片</h5>
              <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center transition-all duration-300">
                <img id="currentHeroImage" src="" alt="当前首页图片" class="max-w-full h-40 object-cover rounded mb-4 mx-auto">
                <label class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg inline-block cursor-pointer transition-all duration-300 hover:shadow-md">
                  <i class="fa fa-file-image-o mr-2"></i>选择新图片
                  <input type="file" id="heroImageInput" accept="image/*" class="hidden">
                </label>
              </div>
            </div>
            
            <div>
              <h5 class="font-medium text-gray-700 mb-3">重置网站（会清除所有上传的图片和数据）</h5>
              <button id="resetSiteBtn" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg transition-all duration-300">
                <i class="fa fa-refresh mr-1"></i>重置网站
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 验证码模态框 -->
      <div id="smsModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl p-6 max-w-md w-full relative">
          <button id="closeSmsModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors">
            <i class="fa fa-times text-xl"></i>
          </button>
          <h3 class="text-xl font-bold mb-4">验证手机号</h3>
          <p class="text-gray-600 mb-4">验证码已发送至 <span id="smsPhoneNumber" class="font-medium"></span></p>
          <p class="text-xs text-gray-500 mb-4">提示：验证码默认为 201502</p>
          <form id="smsVerificationForm" class="space-y-4">
            <div>
              <label for="smsCodeInput" class="block text-sm font-medium text-gray-700 mb-1">验证码 *</label>
              <input type="text" id="smsCodeInput" required maxlength="6"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>
            <div class="flex gap-2">
              <button type="button" id="resendSmsBtn" class="flex-1 border border-gray-300 py-2 px-4 rounded-lg transition-all duration-300">
                重新发送
              </button>
              <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-300">
                验证
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  </main>
  
  <!-- 图片预览模态框 -->
  <div id="imageModal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center p-4">
    <div class="relative bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col md:flex-row">
      <button id="closeModal" class="absolute top-4 right-4 bg-black/50 text-white w-8 h-8 rounded-full flex items-center justify-center z-10 hover:bg-black/70 transition-colors">
        <i class="fa fa-times"></i>
      </button>
      
      <div class="md:w-2/3 bg-gray-100 flex items-center justify-center p-4">
        <img id="modalImage" src="" alt="图片预览" class="max-w-full max-h-[60vh] object-contain">
      </div>
      
      <div class="md:w-1/3 p-6 overflow-y-auto">
        <div class="flex justify-between items-start mb-2">
          <h3 id="modalTitle" class="text-xl font-bold"></h3>
          <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded text-sm">编号: <span id="modalImageId"></span></span>
        </div>
        <p id="modalUploadDate" class="text-gray-500 text-sm mb-4"></p>
        
        <!-- 标签显示 -->
        <div class="flex flex-wrap gap-2 mb-4">
          <span class="tag-display px-2 py-1 bg-blue-100 text-primary rounded text-xs" id="modalShapeTag"></span>
          <span class="tag-display px-2 py-1 bg-green-100 text-green-700 rounded text-xs" id="modalTypeTag"></span>
        </div>
        
        <div class="mb-6">
          <div class="flex items-center text-gray-600 mb-2">
            <i class="fa fa-download mr-2"></i>
            <span id="modalDownloads">0 次下载</span>
          </div>
          <div class="flex items-center text-gray-600 mb-2">
            <i class="fa fa-heart mr-2 text-red-500"></i>
            <span id="modalLikes">0 次点赞</span>
          </div>
          <div class="flex items-center text-gray-600 mb-2">
            <i class="fa fa-trophy mr-2 text-yellow-500"></i>
            <span id="modalDownloadRank">下载排名: --</span>
          </div>
          <div class="flex items-center text-gray-600">
            <i class="fa fa-trophy mr-2 text-yellow-500"></i>
            <span id="modalLikeRank">点赞排名: --</span>
          </div>
        </div>
        
        <div class="flex gap-3 justify-center">
          <button id="modalLikeBtn" class="action-btn text-red-500 border border-red-500 hover:bg-red-50">
            <i class="fa fa-heart"></i>
          </button>
          <button id="modalDownloadBtn" class="action-btn text-secondary border border-secondary hover:bg-green-50">
            <i class="fa fa-download"></i>
          </button>
          <button id="modalViewBtn" class="action-btn text-primary border border-primary hover:bg-blue-50">
            <i class="fa fa-eye"></i>
          </button>
        </div>
        
        <!-- 管理员删除按钮 -->
        <button id="adminDeleteBtn" class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg flex items-center justify-center space-x-2 transition-all duration-300 hidden">
          <i class="fa fa-trash"></i>
          <span>删除图片</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 提示消息模态框 -->
  <div id="messageModal" class="fixed bottom-4 right-4 bg-dark text-white p-4 rounded-lg shadow-lg z-50 transform translate-y-20 opacity-0 transition-all duration-300 flex items-center">
    <i id="messageIcon" class="fa fa-info-circle mr-2 text-primary"></i>
    <span id="messageText"></span>
  </div>
  
  <!-- 页脚 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <h2 class="text-xl font-bold">爱来自DKY</h2>
          </div>
          <p class="text-gray-400 mb-4">一个简单易用的图片资源共享平台</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors"></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"></a>
          </div>
        </div>
        
        <div>
          <h3 class="text-lg font-semibold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors home-link">首页</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors gallery-link">热门图片</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors profile-link">我的</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-semibold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-center text-gray-400">
              <i class="fa fa-envelope mr-2"></i>
              <span>2389487585@qq.com</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa fa-phone mr-2"></i>
              <span>18622021000</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa fa-map-marker mr-2"></i>
              <span>北京市丰台区富丰路7号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
        <p>© 2025 爱来自DKY. 保留所有权利。</p>
      </div>
    </div>
  </footer>

  <script>
    // 初始化本地存储
    function initLocalStorage() {
      // 初始化管理员账户 - 使用localStorage长期存储
      if (!localStorage.getItem('admins')) {
        const admins = [
          {
            username: 'liu1227',
            password: 'liuchuanzhi1227' // 初始密码
          }
        ];
        localStorage.setItem('admins', JSON.stringify(admins));
      }
      
      // 初始化图片数据
      if (!localStorage.getItem('images')) {
        const sampleImages = [
          {
            id: 1,
            title: "夏日海滩海报",
            url: "https://picsum.photos/seed/poster1/800/600",
            uploadDate: "2023-05-15",
            downloads: 124,
            likes: 86,
            views: 356,
            shape: "横版",
            type: "海报"
          },
          {
            id: 2,
            title: "乐队吧唧徽章",
            url: "https://picsum.photos/seed/badge1/400/400",
            uploadDate: "2023-05-12",
            downloads: 89,
            likes: 120,
            views: 215,
            shape: "圆形",
            type: "吧唧徽章"
          },
          {
            id: 3,
            title: "森林明信片",
            url: "https://picsum.photos/seed/postcard1/600/800",
            uploadDate: "2023-05-10",
            downloads: 203,
            likes: 156,
            views: 542,
            shape: "竖版",
            type: "明信片"
          },
          {
            id: 4,
            title: "城市夜景海报",
            url: "https://picsum.photos/seed/poster2/800/500",
            uploadDate: "2023-05-08",
            downloads: 176,
            likes: 98,
            views: 432,
            shape: "横版",
            type: "海报"
          },
          {
            id: 5,
            title: "动漫角色吧唧",
            url: "https://picsum.photos/seed/badge2/400/400",
            uploadDate: "2023-05-05",
            downloads: 98,
            likes: 210,
            views: 278,
            shape: "圆形",
            type: "吧唧徽章"
          },
          {
            id: 6,
            title: "山脉风景明信片",
            url: "https://picsum.photos/seed/postcard2/600/900",
            uploadDate: "2023-05-03",
            downloads: 67,
            likes: 76,
            views: 156,
            shape: "竖版",
            type: "明信片"
          }
        ];
        localStorage.setItem('images', JSON.stringify(sampleImages));
      }
      
      // 初始化用户反馈
      if (!localStorage.getItem('feedback')) {
        localStorage.setItem('feedback', JSON.stringify([]));
      }
      
      // 初始化首页图片
      if (!localStorage.getItem('heroImage')) {
        localStorage.setItem('heroImage', 'https://picsum.photos/seed/hero/1600/800');
      }
      
      // 初始化验证码存储
      if (!localStorage.getItem('smsCodes')) {
        localStorage.setItem('smsCodes', JSON.stringify({}));
      }
      
      // 清除可能存在的旧登录状态
      sessionStorage.removeItem('currentAdmin');
    }
    
    // 从本地存储获取数据
    function getImages() {
      return JSON.parse(localStorage.getItem('images') || '[]');
    }
    
    function saveImages(images) {
      localStorage.setItem('images', JSON.stringify(images));
    }
    
    function getAdmins() {
      return JSON.parse(localStorage.getItem('admins') || '[]');
    }
    
    function saveAdmins(admins) {
      localStorage.setItem('admins', JSON.stringify(admins));
    }
    
    function getFeedback() {
      return JSON.parse(localStorage.getItem('feedback') || '[]');
    }
    
    function saveFeedback(feedback) {
      localStorage.setItem('feedback', JSON.stringify(feedback));
    }
    
    function getHeroImage() {
      return localStorage.getItem('heroImage') || 'https://picsum.photos/seed/hero/1600/800';
    }
    
    function saveHeroImage(url) {
      localStorage.setItem('heroImage', url);
    }
    
    function getCurrentAdmin() {
      return JSON.parse(sessionStorage.getItem('currentAdmin') || 'null');
    }
    
    function setCurrentAdmin(admin) {
      sessionStorage.setItem('currentAdmin', JSON.stringify(admin));
    }
    
    function getSmsCodes() {
      return JSON.parse(localStorage.getItem('smsCodes') || '{}');
    }
    
    function saveSmsCode(phone, code) {
      const codes = getSmsCodes();
      codes[phone] = {
        code: code,
        expires: Date.now() + 5 * 60 * 1000 // 5分钟有效期
      };
      localStorage.setItem('smsCodes', JSON.stringify(codes));
    }
    
    function verifySmsCode(phone, code) {
      // 验证码默认为201502
      if (code === '201502') return true;
      
      const codes = getSmsCodes();
      if (!codes[phone]) return false;
      if (Date.now() > codes[phone].expires) return false;
      return codes[phone].code === code;
    }
    
    // 全局变量
    let allImages = [];
    let currentPage = 1;
    const imagesPerPage = 6;
    let currentTagFilter = null;
    let currentSort = 'default';
    let currentImageId = null;
    let verificationPhone = null;
    let pendingImages = []; // 待上传的图片队列
    
    // DOM元素
    const uploadBtn = document.getElementById('uploadBtn');
    const homeUploadBtn = document.getElementById('homeUploadBtn');
    const uploadSection = document.getElementById('uploadSection');
    const dropArea = document.getElementById('dropArea');
    const fileInput = document.getElementById('fileInput');
    const uploadProgress = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const progressFileName = document.getElementById('progressFileName');
    const uploadSuccess = document.getElementById('uploadSuccess');
    const uploadedImageId = document.getElementById('uploadedImageId');
    const imageGrid = document.getElementById('imageGrid');
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    const imageModal = document.getElementById('imageModal');
    const closeModal = document.getElementById('closeModal');
    const modalImage = document.getElementById('modalImage');
    const modalTitle = document.getElementById('modalTitle');
    const modalImageId = document.getElementById('modalImageId');
    const modalUploadDate = document.getElementById('modalUploadDate');
    const modalDownloads = document.getElementById('modalDownloads');
    const modalLikes = document.getElementById('modalLikes');
    const modalDownloadBtn = document.getElementById('modalDownloadBtn');
    const modalLikeBtn = document.getElementById('modalLikeBtn');
    const modalViewBtn = document.getElementById('modalViewBtn');
    const modalDownloadRank = document.getElementById('modalDownloadRank');
    const modalLikeRank = document.getElementById('modalLikeRank');
    const modalShapeTag = document.getElementById('modalShapeTag');
    const modalTypeTag = document.getElementById('modalTypeTag');
    const adminDeleteBtn = document.getElementById('adminDeleteBtn');
    const searchInput = document.getElementById('searchInput');
    const sortBtns = document.querySelectorAll('.sort-btn');
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const navbar = document.getElementById('navbar');
    const imageForm = document.getElementById('imageForm');
    const shapeOther = document.getElementById('shapeOther');
    const shapeOtherText = document.getElementById('shapeOtherText');
    const typeOther = document.getElementById('typeOther');
    const typeOtherText = document.getElementById('typeOtherText');
    const homeSection = document.getElementById('homeSection');
    const gallerySection = document.getElementById('gallerySection');
    const profileSection = document.getElementById('profileSection');
    const homeLinks = document.querySelectorAll('.home-link');
    const galleryLinks = document.querySelectorAll('.gallery-link');
    const profileLinks = document.querySelectorAll('.profile-link');
    const tagContainer = document.getElementById('tagContainer');
    const heroImage = document.getElementById('heroImage');
    
    // 身份选择相关元素
    const identitySelection = document.getElementById('identitySelection');
    const userIdentityBtn = document.getElementById('userIdentityBtn');
    const adminIdentityBtn = document.getElementById('adminIdentityBtn');
    const userPage = document.getElementById('userPage');
    const adminLoginPage = document.getElementById('adminLoginPage');
    const adminPage = document.getElementById('adminPage');
    const forgotPasswordPage = document.getElementById('forgotPasswordPage');
    const forgotPasswordBtn = document.getElementById('forgotPasswordBtn');
    const backToLoginBtn = document.getElementById('backToLoginBtn');
    
    // 忘记密码相关元素
    const forgotPasswordForm = document.getElementById('forgotPasswordForm');
    const resetPhone = document.getElementById('resetPhone');
    const resetSmsCode = document.getElementById('resetSmsCode');
    const sendResetSmsBtn = document.getElementById('sendResetSmsBtn');
    
    // 用户反馈相关元素
    const feedbackForm = document.getElementById('feedbackForm');
    const feedbackList = document.getElementById('feedbackList');
    
    // 管理员登录相关元素
    const adminLoginForm = document.getElementById('adminLoginForm');
    const logoutBtn = document.getElementById('logoutBtn');
    
    // 管理员标签页相关元素
    const adminTabBtns = document.querySelectorAll('.admin-tab-btn');
    const adminTabContents = document.querySelectorAll('.admin-tab-content');
    
    // 管理员图片管理相关元素
    const adminImageGrid = document.getElementById('adminImageGrid');
    
    // 管理员密码修改相关元素
    const changePasswordForm = document.getElementById('changePasswordForm');
    
    // 添加管理员相关元素
    const addAdminForm = document.getElementById('addAdminForm');
    const sendAdminSmsBtn = document.getElementById('sendAdminSmsBtn');
    
    // 网站设置相关元素
    const heroImageInput = document.getElementById('heroImageInput');
    const currentHeroImage = document.getElementById('currentHeroImage');
    const resetSiteBtn = document.getElementById('resetSiteBtn');
    
    // 验证码相关元素
    const smsModal = document.getElementById('smsModal');
    const closeSmsModal = document.getElementById('closeSmsModal');
    const smsPhoneNumber = document.getElementById('smsPhoneNumber');
    const smsVerificationForm = document.getElementById('smsVerificationForm');
    const smsCodeInput = document.getElementById('smsCodeInput');
    const resendSmsBtn = document.getElementById('resendSmsBtn');
    
    // 待上传图片相关元素
    const pendingUploads = document.getElementById('pendingUploads');
    const pendingImagesContainer = document.getElementById('pendingImagesContainer');
    
    // 消息提示相关元素
    const messageModal = document.getElementById('messageModal');
    const messageIcon = document.getElementById('messageIcon');
    const messageText = document.getElementById('messageText');
    
    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
      initLocalStorage();
      allImages = getImages();
      updateHeroImage();
      renderImages();
      renderTags();
      setupEventListeners();
      checkAdminLoginStatus();
    });
    
    // 更新首页图片
    function updateHeroImage() {
      const imageUrl = getHeroImage();
      heroImage.style.backgroundImage = `url('${imageUrl}')`;
      currentHeroImage.src = imageUrl;
      currentHeroImage.alt = '首页展示图片';
    }
    
    // 设置事件监听器
    function setupEventListeners() {
      // 页面导航
      homeLinks.forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          homeSection.classList.remove('hidden');
          gallerySection.classList.add('hidden');
          profileSection.classList.add('hidden');
          mobileMenu.classList.add('hidden');
        });
      });
      
      galleryLinks.forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          homeSection.classList.add('hidden');
          gallerySection.classList.remove('hidden');
          profileSection.classList.add('hidden');
          mobileMenu.classList.add('hidden');
          renderImages(true);
        });
      });
      
      profileLinks.forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          homeSection.classList.add('hidden');
          gallerySection.classList.add('hidden');
          profileSection.classList.remove('hidden');
          mobileMenu.classList.add('hidden');
          showIdentitySelection();
        });
      });
      
      // 上传按钮点击事件
      uploadBtn.addEventListener('click', () => {
        homeSection.classList.add('hidden');
        gallerySection.classList.remove('hidden');
        profileSection.classList.add('hidden');
        uploadSection.scrollIntoView({ behavior: 'smooth' });
        mobileMenu.classList.add('hidden');
      });
      
      homeUploadBtn.addEventListener('click', () => {
        homeSection.classList.add('hidden');
        gallerySection.classList.remove('hidden');
        profileSection.classList.add('hidden');
        uploadSection.scrollIntoView({ behavior: 'smooth' });
      });
      
      // 处理其他输入框的启用/禁用
      shapeOther.addEventListener('change', () => {
        shapeOtherText.disabled = !shapeOther.checked;
        if (shapeOther.checked) {
          shapeOtherText.required = true;
        } else {
          shapeOtherText.required = false;
        }
      });
      
      typeOther.addEventListener('change', () => {
        typeOtherText.disabled = !typeOther.checked;
        if (typeOther.checked) {
          typeOtherText.required = true;
        } else {
          typeOtherText.required = false;
        }
      });
      
      // 拖放事件
      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
      });
      
      function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
      }
      
      ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
      });
      
      ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
      });
      
      function highlight() {
        dropArea.classList.add('upload-area-active');
      }
      
      function unhighlight() {
        dropArea.classList.remove('upload-area-active');
      }
      
      // 处理文件拖放
      dropArea.addEventListener('drop', handleDrop, false);
      
      function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        if (files.length) {
          handleFiles(files);
        }
      }
      
      // 文件选择事件
      fileInput.addEventListener('change', function() {
        if (this.files.length) {
          handleFiles(this.files);
        }
      });
      
      // 处理选择的文件
      function handleFiles(files) {
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          if (!file.type.startsWith('image/')) {
            showMessage('请选择图片文件', 'error');
            continue;
          }
          
          // 检查文件大小
          if (file.size > 10 * 1024 * 1024) {
            showMessage('图片大小不能超过10MB', 'error');
            continue;
          }
          
          // 添加到待上传队列
          const reader = new FileReader();
          reader.onload = function(e) {
            const imageId = Date.now() + i; // 生成临时ID
            pendingImages.push({
              id: imageId,
              file: file,
              url: e.target.result,
              name: file.name
            });
            
            // 显示待上传图片
            renderPendingImages();
          };
          reader.readAsDataURL(file);
        }
      }
      
      // 渲染待上传图片
      function renderPendingImages() {
        if (pendingImages.length === 0) {
          pendingUploads.classList.add('hidden');
          return;
        }
        
        pendingUploads.classList.remove('hidden');
        pendingImagesContainer.innerHTML = '';
        
        pendingImages.forEach(image => {
          const imageItem = document.createElement('div');
          imageItem.className = 'relative bg-gray-100 rounded-lg overflow-hidden w-32 h-32';
          imageItem.innerHTML = `
            <img src="${image.url}" alt="${image.name}" class="w-full h-full object-cover">
            <button class="absolute top-1 right-1 bg-red-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs cancel-upload" data-id="${image.id}">
              <i class="fa fa-times"></i>
            </button>
            <div class="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs p-1 truncate">
              ${image.name}
            </div>
          `;
          
          pendingImagesContainer.appendChild(imageItem);
          
          // 添加取消上传事件
          imageItem.querySelector('.cancel-upload').addEventListener('click', function() {
            const id = parseInt(this.dataset.id);
            pendingImages = pendingImages.filter(img => img.id !== id);
            renderPendingImages();
          });
        });
      }
      
      // 点击上传区域触发文件选择
      dropArea.addEventListener('click', (e) => {
        // 检查点击目标是否不是输入元素
        if (!e.target.closest('input') && !e.target.closest('label')) {
          fileInput.click();
        }
      });
      
      // 表单提交事件
      imageForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (pendingImages.length === 0) {
          showMessage('请选择要上传的图片', 'error');
          return;
        }
        
        // 获取表单数据
        const title = document.getElementById('imageTitle').value;
        let shape = document.querySelector('input[name="imageShape"]:checked').value;
        if (shape === '其他') {
          shape = shapeOtherText.value.trim() || '其他';
        }
        
        let imageType = document.querySelector('input[name="imageType"]:checked').value;
        if (imageType === '其他') {
          imageType = typeOtherText.value.trim() || '其他';
        }
        
        // 开始上传第一张图片
        uploadNextImage(title, shape, imageType);
      });
      
      // 上传队列中的下一张图片
      function uploadNextImage(title, shape, imageType) {
        if (pendingImages.length === 0) {
          // 所有图片上传完成
          uploadProgress.classList.add('hidden');
          uploadSuccess.classList.remove('hidden');
          
          // 重置表单和上传区域
          setTimeout(() => {
            progressBar.style.width = '0%';
            progressPercent.textContent = '0%';
            fileInput.value = '';
            imageForm.reset();
            shapeOtherText.disabled = true;
            typeOtherText.disabled = true;
            uploadSuccess.classList.add('hidden');
            pendingImages = [];
            renderPendingImages();
          }, 2000);
          
          return;
        }
        
        // 取出队列中的第一张图片
        const currentImage = pendingImages[0];
        
        // 模拟上传过程
        uploadProgress.classList.remove('hidden');
        uploadSuccess.classList.add('hidden');
        progressFileName.textContent = currentImage.name;
        
        // 生成唯一ID
        const newId = allImages.length > 0 
          ? Math.max(...allImages.map(img => img.id)) + 1 
          : 1;
        
        // 模拟进度
        let progress = 0;
        const interval = setInterval(() => {
          progress += 10;
          progressBar.style.width = `${progress}%`;
          progressPercent.textContent = `${progress}%`;
          
          if (progress >= 100) {
            clearInterval(interval);
            
            setTimeout(() => {
              // 从队列中移除已上传的图片
              pendingImages.shift();
              renderPendingImages();
              
              // 创建新图片对象
              const newImage = {
                id: newId,
                title: title,
                url: currentImage.url,
                uploadDate: new Date().toISOString().split('T')[0],
                downloads: 0,
                likes: 0,
                views: 0,
                shape: shape,
                type: imageType
              };
              
              // 添加到图片列表并重新渲染
              allImages.unshift(newImage);
              saveImages(allImages);
              currentPage = 1;
              renderImages(true);
              renderTags();
              
              // 记录最后上传的图片ID用于显示
              uploadedImageId.textContent = newId;
              
              // 继续上传下一张
              uploadNextImage(title, shape, imageType);
            }, 500);
          }
        }, 100);
      }
      
      // 排序按钮事件
      sortBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          // 更新按钮样式
          sortBtns.forEach(b => b.classList.remove('btn-active'));
          btn.classList.add('btn-active');
          
          currentSort = btn.dataset.sort;
          currentPage = 1;
          renderImages(true);
        });
      });
      
      // 加载更多按钮
      loadMoreBtn.addEventListener('click', loadMoreImages);
      
      // 关闭模态框
      closeModal.addEventListener('click', () => {
        imageModal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
      });
      
      // 点击模态框背景关闭
      imageModal.addEventListener('click', (e) => {
        if (e.target === imageModal) {
          imageModal.classList.add('hidden');
          document.body.classList.remove('overflow-hidden');
        }
      });
      
      // 搜索功能
      searchInput.addEventListener('input', filterImages);
      
      // 移动端菜单
      mobileMenuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
      });
      
      // 导航栏滚动效果
      window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
          navbar.classList.add('py-2', 'shadow');
          navbar.classList.remove('py-4');
        } else {
          navbar.classList.add('py-4');
          navbar.classList.remove('py-2', 'shadow');
        }
      });
      
      // 下载按钮
      modalDownloadBtn.addEventListener('click', downloadCurrentImage);
      
      // 点赞按钮
      modalLikeBtn.addEventListener('click', likeCurrentImage);
      
      // 查看按钮（在模态框中只是放大显示）
      modalViewBtn.addEventListener('click', () => {
        if (currentImageId) {
          // 这里可以实现图片放大查看功能
          showMessage('图片查看功能', 'info');
        }
      });
      
      // 管理员删除按钮
      adminDeleteBtn.addEventListener('click', deleteCurrentImage);
      
      // 身份选择按钮
      userIdentityBtn.addEventListener('click', () => {
        identitySelection.classList.add('hidden');
        userPage.classList.remove('hidden');
        adminLoginPage.classList.add('hidden');
        forgotPasswordPage.classList.add('hidden');
        adminPage.classList.add('hidden');
      });
      
      adminIdentityBtn.addEventListener('click', () => {
        identitySelection.classList.add('hidden');
        userPage.classList.add('hidden');
        adminLoginPage.classList.remove('hidden');
        forgotPasswordPage.classList.add('hidden');
        adminPage.classList.add('hidden');
        
        // 检查是否已登录
        if (getCurrentAdmin()) {
          showAdminPage();
        }
      });
      
      // 忘记密码相关
      forgotPasswordBtn.addEventListener('click', () => {
        adminLoginPage.classList.add('hidden');
        forgotPasswordPage.classList.remove('hidden');
      });
      
      backToLoginBtn.addEventListener('click', () => {
        forgotPasswordPage.classList.add('hidden');
        adminLoginPage.classList.remove('hidden');
      });
      
      // 忘记密码表单提交
      forgotPasswordForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const phone = resetPhone.value.trim();
        const code = resetSmsCode.value.trim();
        const newPassword = document.getElementById('newAdminPassword').value;
        const confirmPassword = document.getElementById('confirmNewPassword').value;
        
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          showMessage('请输入正确的手机号', 'error');
          return;
        }
        
        if (!verifySmsCode(phone, code)) {
          showMessage('验证码不正确或已过期', 'error');
          return;
        }
        
        if (newPassword !== confirmPassword) {
          showMessage('两次输入的密码不一致', 'error');
          return;
        }
        
        if (newPassword.length < 6) {
          showMessage('密码长度不能少于6位', 'error');
          return;
        }
        
        // 更新管理员密码（假设手机号对应管理员账户）
        // 在实际应用中，应该有手机号和管理员的关联关系
        const admins = getAdmins();
        // 这里简单处理，更新第一个管理员的密码
        if (admins.length > 0) {
          admins[0].password = newPassword;
          saveAdmins(admins);
          showMessage('密码重置成功', 'success');
          
          // 返回登录页面
          setTimeout(() => {
            forgotPasswordPage.classList.add('hidden');
            adminLoginPage.classList.remove('hidden');
            forgotPasswordForm.reset();
          }, 1500);
        }
      });
      
      // 发送重置密码验证码
      sendResetSmsBtn.addEventListener('click', function() {
        const phone = resetPhone.value.trim();
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          showMessage('请输入正确的手机号', 'error');
          return;
        }
        
        // 生成默认验证码201502
        const code = '201502';
        
        // 保存验证码
        saveSmsCode(phone, code);
        
        // 模拟发送短信
        showMessage(`验证码已发送至${phone}，验证码为${code}`, 'info');
        
        // 倒计时
        let seconds = 60;
        sendResetSmsBtn.disabled = true;
        sendResetSmsBtn.textContent = `重新发送(${seconds}s)`;
        
        const timer = setInterval(() => {
          seconds--;
          sendResetSmsBtn.textContent = `重新发送(${seconds}s)`;
          
          if (seconds <= 0) {
            clearInterval(timer);
            sendResetSmsBtn.disabled = false;
            sendResetSmsBtn.textContent = '获取验证码';
          }
        }, 1000);
      });
      
      // 管理员登录表单提交
      adminLoginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const username = document.getElementById('adminUsername').value;
        const password = document.getElementById('adminPassword').value;
        const admins = getAdmins();
        
        const admin = admins.find(a => a.username === username && a.password === password);
        
        if (admin) {
          setCurrentAdmin(admin);
          showMessage('登录成功', 'success');
          showAdminPage();
        } else {
          showMessage('用户名或密码错误', 'error');
        }
      });
      
      // 管理员登出
      logoutBtn.addEventListener('click', () => {
        setCurrentAdmin(null);
        showMessage('已退出登录', 'info');
        identitySelection.classList.remove('hidden');
        userPage.classList.add('hidden');
        adminLoginPage.classList.remove('hidden');
        adminPage.classList.add('hidden');
      });
      
      // 管理员标签页切换
      adminTabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const tab = btn.dataset.tab;
          
          // 更新按钮样式
          adminTabBtns.forEach(b => b.classList.remove('btn-active'));
          btn.classList.add('btn-active');
          
          // 显示对应内容
          adminTabContents.forEach(content => content.classList.add('hidden'));
          document.getElementById(`${tab}-tab`).classList.remove('hidden');
          
          // 如果是图片管理或用户诉求标签页，刷新内容
          if (tab === 'manage-images') {
            renderAdminImages();
          } else if (tab === 'user-feedback') {
            renderFeedbackList();
          }
        });
      });
      
      // 用户反馈表单提交
      feedbackForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const title = document.getElementById('feedbackTitle').value;
        const content = document.getElementById('feedbackContent').value;
        const contact = document.getElementById('feedbackContact').value;
        
        const feedback = getFeedback();
        feedback.push({
          id: Date.now(),
          title: title,
          content: content,
          contact: contact,
          date: new Date().toISOString().split('T')[0],
          completed: false
        });
        
        saveFeedback(feedback);
        showMessage('诉求提交成功', 'success');
        feedbackForm.reset();
      });
      
      // 修改密码表单提交
      changePasswordForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const currentPassword = document.getElementById('currentPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        
        const currentAdmin = getCurrentAdmin();
        if (!currentAdmin) {
          showMessage('请先登录', 'error');
          return;
        }
        
        if (currentAdmin.password !== currentPassword) {
          showMessage('当前密码不正确', 'error');
          return;
        }
        
        if (newPassword !== confirmPassword) {
          showMessage('两次输入的密码不一致', 'error');
          return;
        }
        
        if (newPassword.length < 6) {
          showMessage('密码长度不能少于6位', 'error');
          return;
        }
        
        // 更新管理员密码
        const admins = getAdmins();
        const adminIndex = admins.findIndex(a => a.username === currentAdmin.username);
        if (adminIndex !== -1) {
          admins[adminIndex].password = newPassword;
          saveAdmins(admins);
          // 更新当前登录管理员信息
          currentAdmin.password = newPassword;
          setCurrentAdmin(currentAdmin);
          showMessage('密码修改成功', 'success');
          changePasswordForm.reset();
        }
      });
      
      // 发送管理员验证码
      sendAdminSmsBtn.addEventListener('click', function() {
        const phone = document.getElementById('adminPhone').value.trim();
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          showMessage('请输入正确的手机号', 'error');
          return;
        }
        
        // 生成默认验证码201502
        const code = '201502';
        
        // 保存验证码
        saveSmsCode(phone, code);
        
        // 显示验证码模态框
        verificationPhone = phone;
        smsPhoneNumber.textContent = phone;
        smsModal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
        
        // 模拟发送短信
        showMessage(`验证码已发送至${phone}，验证码为${code}`, 'info');
        
        // 倒计时
        let seconds = 60;
        resendSmsBtn.disabled = true;
        resendSmsBtn.textContent = `重新发送(${seconds}s)`;
        
        const timer = setInterval(() => {
          seconds--;
          resendSmsBtn.textContent = `重新发送(${seconds}s)`;
          
          if (seconds <= 0) {
            clearInterval(timer);
            resendSmsBtn.disabled = false;
            resendSmsBtn.textContent = '重新发送';
          }
        }, 1000);
      });
      
      // 关闭验证码模态框
      closeSmsModal.addEventListener('click', function() {
        smsModal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
        smsCodeInput.value = '';
      });
      
      // 重新发送验证码
      resendSmsBtn.addEventListener('click', function() {
        if (!verificationPhone) return;
        
        // 生成默认验证码201502
        const code = '201502';
        
        // 保存验证码
        saveSmsCode(verificationPhone, code);
        
        // 模拟发送短信
        showMessage(`验证码已重新发送至${verificationPhone}，验证码为${code}`, 'info');
        
        // 倒计时
        let seconds = 60;
        resendSmsBtn.disabled = true;
        resendSmsBtn.textContent = `重新发送(${seconds}s)`;
        
        const timer = setInterval(() => {
          seconds--;
          resendSmsBtn.textContent = `重新发送(${seconds}s)`;
          
          if (seconds <= 0) {
            clearInterval(timer);
            resendSmsBtn.disabled = false;
            resendSmsBtn.textContent = '重新发送';
          }
        }, 1000);
      });
      
      // 验证码验证
      smsVerificationForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!verificationPhone) return;
        
        const code = smsCodeInput.value.trim();
        
        if (verifySmsCode(verificationPhone, code)) {
          // 验证成功，关闭模态框
          smsModal.classList.add('hidden');
          document.body.classList.remove('overflow-hidden');
          showMessage('验证成功', 'success');
          
          // 继续添加管理员
          const username = document.getElementById('newAdminUsername').value;
          const password = document.getElementById('newAdminPassword').value;
          
          if (!username || !password) {
            showMessage('请填写用户名和密码', 'error');
            return;
          }
          
          if (password.length < 6) {
            showMessage('密码长度不能少于6位', 'error');
            return;
          }
          
          const admins = getAdmins();
          // 检查用户名是否已存在
          if (admins.some(a => a.username === username)) {
            showMessage('用户名已存在', 'error');
            return;
          }
          
          // 添加新管理员
          admins.push({ username, password });
          saveAdmins(admins);
          showMessage('新管理员添加成功', 'success');
          addAdminForm.reset();
          verificationPhone = null;
          smsCodeInput.value = '';
        } else {
          showMessage('验证码不正确或已过期', 'error');
        }
      });
      
      // 首页图片上传
      heroImageInput.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
          const reader = new FileReader();
          
          reader.onload = function(e) {
            saveHeroImage(e.target.result);
            updateHeroImage();
            showMessage('首页图片已更新', 'success');
          }
          
          reader.readAsDataURL(this.files[0]);
        }
      });
      
      // 重置网站
      resetSiteBtn.addEventListener('click', function() {
        if (confirm('确定要重置网站吗？这将清除所有上传的图片和数据！')) {
          // 清除本地存储中的图片和反馈
          localStorage.removeItem('images');
          localStorage.removeItem('feedback');
          localStorage.removeItem('heroImage');
          
          // 重新初始化
          initLocalStorage();
          allImages = getImages();
          updateHeroImage();
          
          // 刷新图片列表
          renderImages(true);
          renderTags();
          
          showMessage('网站已重置', 'success');
        }
      });
    }
    
    // 显示身份选择界面
    function showIdentitySelection() {
      identitySelection.classList.remove('hidden');
      userPage.classList.add('hidden');
      adminLoginPage.classList.add('hidden');
      forgotPasswordPage.classList.add('hidden');
      adminPage.classList.add('hidden');
    }
    
    // 显示管理员页面
    function showAdminPage() {
      identitySelection.classList.add('hidden');
      userPage.classList.add('hidden');
      adminLoginPage.classList.add('hidden');
      forgotPasswordPage.classList.add('hidden');
      adminPage.classList.remove('hidden');
      
      // 渲染用户诉求列表
      renderFeedbackList();
      
      // 渲染管理员图片列表
      renderAdminImages();
    }
    
    // 检查管理员登录状态
    function checkAdminLoginStatus() {
      // 由于使用sessionStorage，关闭网站后会自动登出
      const currentAdmin = getCurrentAdmin();
      if (currentAdmin) {
        // 如果已登录，直接显示管理员页面
        profileSection.classList.remove('hidden');
        showAdminPage();
      }
    }
    
    // 渲染用户诉求列表
    function renderFeedbackList() {
      const feedback = getFeedback();
      feedbackList.innerHTML = '';
      
      if (feedback.length === 0) {
        feedbackList.innerHTML = '<p class="text-gray-500 text-center py-6">暂无用户诉求</p>';
        return;
      }
      
      // 按日期倒序排列
      feedback.sort((a, b) => new Date(b.date) - new Date(a.date));
      
      feedback.forEach(item => {
        const feedbackItem = document.createElement('div');
        feedbackItem.className = `border rounded-lg p-4 ${item.completed ? 'bg-gray-50 border-gray-200' : ''}`;
        feedbackItem.innerHTML = `
          <div class="flex justify-between items-start mb-2">
            <h5 class="font-medium ${item.completed ? 'text-gray-500 line-through' : ''}">${item.title}</h5>
            <span class="text-sm text-gray-500">${formatDate(item.date)}</span>
          </div>
          <p class="text-gray-600 mb-3 text-sm">${item.content}</p>
          ${item.contact ? `<p class="text-sm text-gray-500 mb-3">联系方式: ${item.contact}</p>` : ''}
          <div class="flex justify-end">
            <button class="complete-feedback-btn text-sm px-3 py-1 rounded ${item.completed ? 'bg-gray-200 text-gray-500' : 'bg-green-100 text-green-700 hover:bg-green-200'}" data-id="${item.id}">
              ${item.completed ? '已完成' : '标记为已完成'}
            </button>
          </div>
        `;
        
        feedbackList.appendChild(feedbackItem);
        
        // 添加标记完成事件
        feedbackItem.querySelector('.complete-feedback-btn').addEventListener('click', function() {
          const id = parseInt(this.dataset.id);
          const feedback = getFeedback();
          const index = feedback.findIndex(item => item.id === id);
          
          if (index !== -1) {
            feedback[index].completed = !feedback[index].completed;
            saveFeedback(feedback);
            renderFeedbackList();
            showMessage(feedback[index].completed ? '已标记为完成' : '已取消完成标记', 'info');
          }
        });
      });
    }
    
    // 渲染管理员图片列表
    function renderAdminImages() {
      const filteredImages = applyFilters();
      adminImageGrid.innerHTML = '';
      
      if (filteredImages.length === 0) {
        adminImageGrid.innerHTML = '<p class="text-gray-500 text-center py-6">暂无图片</p>';
        return;
      }
      
      filteredImages.forEach(image => {
        const imageCard = document.createElement('div');
        imageCard.className = 'bg-white rounded-xl overflow-hidden shadow-sm card-hover';
        imageCard.innerHTML = `
          <div class="relative overflow-hidden aspect-[4/3] cursor-pointer group">
            <img src="${image.url}" alt="${image.title}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
            <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
              <button class="action-btn view-btn" data-id="${image.id}">
                <i class="fa fa-eye"></i>
              </button>
              <button class="action-btn download-btn" data-id="${image.id}">
                <i class="fa fa-download"></i>
              </button>
              <button class="action-btn bg-red-500 text-white border border-red-500 hover:bg-red-600 admin-delete-btn" data-id="${image.id}">
                <i class="fa fa-trash"></i>
              </button>
            </div>
            <!-- 标签 -->
            <div class="absolute top-2 left-2 flex flex-wrap gap-1">
              <span class="px-2 py-1 bg-blue-500/80 text-white text-xs rounded">${image.shape}</span>
              <span class="px-2 py-1 bg-green-500/80 text-white text-xs rounded">${image.type}</span>
            </div>
            <div class="absolute top-2 right-2 bg-gray-800/80 text-white text-xs px-2 py-1 rounded">
              编号: ${image.id}
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-semibold mb-1 line-clamp-1">${image.title}</h3>
            <div class="flex justify-between text-sm text-gray-500">
              <span>${formatDate(image.uploadDate)}</span>
              <span><i class="fa fa-download mr-1"></i>${image.downloads} <i class="fa fa-heart ml-2 mr-1 text-red-500"></i>${image.likes}</span>
            </div>
          </div>
        `;
        
        adminImageGrid.appendChild(imageCard);
        
        // 添加查看事件
        imageCard.querySelector('.view-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          openImageModal(parseInt(e.currentTarget.dataset.id));
        });
        
        // 添加下载事件
        imageCard.querySelector('.download-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          downloadImage(parseInt(e.currentTarget.dataset.id));
        });
        
        // 添加删除事件
        imageCard.querySelector('.admin-delete-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          const id = parseInt(e.currentTarget.dataset.id);
          if (confirm('确定要删除这张图片吗？')) {
            deleteImage(id);
          }
        });
      });
    }
    
    // 渲染标签
    function renderTags() {
      tagContainer.innerHTML = '';
      
      // 收集所有标签
      const shapeTags = new Set();
      const typeTags = new Set();
      
      allImages.forEach(image => {
        shapeTags.add(image.shape);
        typeTags.add(image.type);
      });
      
      // 合并并去重
      const allTags = new Set([...shapeTags, ...typeTags]);
      
      // 渲染标签
      allTags.forEach(tag => {
        const tagElement = document.createElement('span');
        tagElement.className = `tag-filter px-3 py-1 bg-gray-200 hover:bg-primary hover:text-white rounded-full text-sm cursor-pointer transition-colors ${currentTagFilter === tag ? 'bg-primary text-white' : ''}`;
        tagElement.dataset.tag = tag;
        tagElement.textContent = tag;
        
        tagElement.addEventListener('click', () => {
          currentTagFilter = currentTagFilter === tag ? null : tag;
          renderTags();
          filterImages();
        });
        
        tagContainer.appendChild(tagElement);
      });
    }
    
    // 渲染图片
    function renderImages(clear = false) {
      if (clear) {
        imageGrid.innerHTML = '';
      }
      
      // 获取当前页的图片
      const startIndex = (currentPage - 1) * imagesPerPage;
      const endIndex = startIndex + imagesPerPage;
      const filteredImages = applyFilters();
      const currentImages = filteredImages.slice(startIndex, endIndex);
      
      if (currentImages.length === 0 && currentPage === 1) {
        imageGrid.innerHTML = `
          <div class="col-span-full text-center py-16">
            <i class="fa fa-picture-o text-gray-300 text-5xl mb-4"></i>
            <p class="text-gray-500">暂无图片，请上传您的第一张图片</p>
          </div>
        `;
        return;
      }
      
      // 添加图片到网格
      currentImages.forEach(image => {
        const imageCard = document.createElement('div');
        imageCard.className = 'bg-white rounded-xl overflow-hidden shadow-sm card-hover';
        imageCard.innerHTML = `
          <div class="relative overflow-hidden aspect-[4/3] cursor-pointer group" data-id="${image.id}">
            <img src="${image.url}" alt="${image.title}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
            <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
              <button class="action-btn view-btn" data-id="${image.id}">
                <i class="fa fa-eye"></i>
              </button>
              <button class="action-btn download-btn" data-id="${image.id}">
                <i class="fa fa-download"></i>
              </button>
              <button class="action-btn text-red-500 border border-red-500 hover:bg-red-50 like-btn" data-id="${image.id}">
                <i class="fa fa-heart"></i>
              </button>
            </div>
            <!-- 标签 -->
            <div class="absolute top-2 left-2 flex flex-wrap gap-1">
              <span class="px-2 py-1 bg-blue-500/80 text-white text-xs rounded">${image.shape}</span>
              <span class="px-2 py-1 bg-green-500/80 text-white text-xs rounded">${image.type}</span>
            </div>
            <!-- 点赞和下载数 -->
            <div class="absolute bottom-2 right-2 flex gap-1">
              <span class="bg-black/60 text-white text-xs px-2 py-1 rounded flex items-center">
                <i class="fa fa-download mr-1"></i>${image.downloads}
              </span>
              <span class="bg-black/60 text-white text-xs px-2 py-1 rounded flex items-center">
                <i class="fa fa-heart mr-1 text-red-400"></i>${image.likes}
              </span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-semibold mb-1 line-clamp-1">${image.title}</h3>
            <div class="flex justify-between text-sm text-gray-500">
              <span>${formatDate(image.uploadDate)}</span>
              <span>编号: ${image.id}</span>
            </div>
          </div>
        `;
        
        imageGrid.appendChild(imageCard);
        
        // 添加查看和下载事件
        imageCard.querySelector('.view-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          openImageModal(parseInt(e.currentTarget.dataset.id));
        });
        
        imageCard.querySelector('.download-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          downloadImage(parseInt(e.currentTarget.dataset.id));
        });
        
        imageCard.querySelector('.like-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          likeImage(parseInt(e.currentTarget.dataset.id));
        });
        
        // 点击卡片查看图片
        imageCard.querySelector('.relative').addEventListener('click', (e) => {
          openImageModal(parseInt(e.currentTarget.dataset.id));
        });
      });
      
      // 控制加载更多按钮显示
      if (endIndex >= filteredImages.length) {
        loadMoreBtn.classList.add('hidden');
      } else {
        loadMoreBtn.classList.remove('hidden');
      }
    }
    
    // 应用过滤条件
    function applyFilters() {
      const searchTerm = searchInput.value.toLowerCase().trim();
      
      let filteredImages = [...allImages];
      
      // 标签过滤
      if (currentTagFilter) {
        filteredImages = filteredImages.filter(image => 
          image.shape.toLowerCase() === currentTagFilter.toLowerCase() || 
          image.type.toLowerCase() === currentTagFilter.toLowerCase()
        );
      }
      
      // 搜索过滤（支持标题、标签和编号）
      if (searchTerm) {
        const searchNumber = parseInt(searchTerm);
        filteredImages = filteredImages.filter(image => 
          image.title.toLowerCase().includes(searchTerm) ||
          image.shape.toLowerCase().includes(searchTerm) ||
          image.type.toLowerCase().includes(searchTerm) ||
          (Number.isInteger(searchNumber) && image.id === searchNumber)
        );
      }
      
      // 排序
      switch (currentSort) {
        case 'downloads':
          filteredImages.sort((a, b) => b.downloads - a.downloads);
          break;
        case 'likes':
          filteredImages.sort((a, b) => b.likes - a.likes);
          break;
        case 'recent':
          filteredImages.sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate));
          break;
        default:
          // 默认排序（最新上传在前）
          filteredImages.sort((a, b) => b.id - a.id);
      }
      
      return filteredImages;
    }
    
    // 过滤图片
    function filterImages() {
      // 重置当前页
      currentPage = 1;
      renderImages(true);
    }
    
    // 加载更多图片
    function loadMoreImages() {
      currentPage++;
      renderImages();
      
      // 滚动到新加载的图片
      const loadMoreBtnRect = loadMoreBtn.getBoundingClientRect();
      window.scrollTo({
        top: window.scrollY + loadMoreBtnRect.top - 200,
        behavior: 'smooth'
      });
    }
    
    // 获取图片在其类别中的排名
    function getImageRank(image, type) {
      // 按类型分组统计
      const sameTypeImages = allImages.filter(img => img.type === image.type);
      // 按相应指标排序
      sameTypeImages.sort((a, b) => type === 'downloads' ? b.downloads - a.downloads : b.likes - a.likes);
      // 找到当前图片的位置
      const rank = sameTypeImages.findIndex(img => img.id === image.id) + 1;
      return `${rank}/${sameTypeImages.length}`;
    }
    
    // 打开图片模态框
    function openImageModal(id) {
      const image = allImages.find(img => img.id === id);
      if (!image) return;
      
      currentImageId = id;
      modalImage.src = image.url;
      modalImage.alt = image.title;
      modalTitle.textContent = image.title;
      modalImageId.textContent = image.id;
      modalUploadDate.textContent = `上传于 ${formatDate(image.uploadDate)}`;
      modalDownloads.textContent = `${image.downloads} 次下载`;
      modalLikes.textContent = `${image.likes} 次点赞`;
      modalShapeTag.textContent = image.shape;
      modalTypeTag.textContent = image.type;
      modalDownloadRank.textContent = `下载排名: ${getImageRank(image, 'downloads')}`;
      modalLikeRank.textContent = `点赞排名: ${getImageRank(image, 'likes')}`;
      
      // 检查是否为管理员
      if (getCurrentAdmin()) {
        adminDeleteBtn.classList.remove('hidden');
      } else {
        adminDeleteBtn.classList.add('hidden');
      }
      
      // 增加浏览次数
      image.views++;
      saveImages(allImages);
      
      imageModal.classList.remove('hidden');
      document.body.classList.add('overflow-hidden');
    }
    
    // 下载当前图片
    function downloadCurrentImage() {
      if (currentImageId) {
        downloadImage(currentImageId);
      }
    }
    
    // 下载图片
    function downloadImage(id) {
      const image = allImages.find(img => img.id === id);
      if (!image) return;
      
      // 增加下载次数
      image.downloads++;
      saveImages(allImages);
      
      // 更新模态框中的下载次数和排名
      if (currentImageId === id && !imageModal.classList.contains('hidden')) {
        modalDownloads.textContent = `${image.downloads} 次下载`;
        modalDownloadRank.textContent = `下载排名: ${getImageRank(image, 'downloads')}`;
      }
      
      // 重新渲染图片网格以更新下载次数
      renderImages(true);
      renderAdminImages();
      
      // 创建下载链接
      const link = document.createElement('a');
      link.href = image.url;
      link.download = `${image.title.replace(/\s+/g, '_')}_${image.id}.jpg`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      showMessage('图片已开始下载', 'success');
    }
    
    // 点赞当前图片
    function likeCurrentImage() {
      if (currentImageId) {
        likeImage(currentImageId);
      }
    }
    
    // 点赞图片
    function likeImage(id) {
      const image = allImages.find(img => img.id === id);
      if (!image) return;
      
      // 增加点赞次数
      image.likes++;
      saveImages(allImages);
      
      // 更新模态框中的点赞次数和排名
      if (currentImageId === id && !imageModal.classList.contains('hidden')) {
        modalLikes.textContent = `${image.likes} 次点赞`;
        modalLikeRank.textContent = `点赞排名: ${getImageRank(image, 'likes')}`;
      }
      
      // 重新渲染图片网格以更新点赞次数
      renderImages(true);
      renderAdminImages();
      
      showMessage('点赞成功', 'success');
    }
    
    // 删除当前图片
    function deleteCurrentImage() {
      if (currentImageId && confirm('确定要删除这张图片吗？')) {
        deleteImage(currentImageId);
        imageModal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
      }
    }
    
    // 删除图片
    function deleteImage(id) {
      const index = allImages.findIndex(img => img.id === id);
      if (index !== -1) {
        allImages.splice(index, 1);
        saveImages(allImages);
        
        // 重新渲染图片网格
        renderImages(true);
        renderAdminImages();
        renderTags();
        
        showMessage('图片已删除', 'info');
      }
    }
    
    // 显示消息提示
    function showMessage(text, type = 'info') {
      messageText.textContent = text;
      
      // 设置图标
      if (type === 'success') {
        messageIcon.className = 'fa fa-check-circle mr-2 text-green-500';
      } else if (type === 'error') {
        messageIcon.className = 'fa fa-exclamation-circle mr-2 text-red-500';
      } else {
        messageIcon.className = 'fa fa-info-circle mr-2 text-primary';
      }
      
      // 显示消息
      messageModal.classList.remove('translate-y-20', 'opacity-0');
      
      // 3秒后隐藏
      setTimeout(() => {
        messageModal.classList.add('translate-y-20', 'opacity-0');
      }, 3000);
    }
    
    // 格式化日期
    function formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
    }
  </script>
</body>
</html>